<template>
  <!-- {{hotCarList}} -->
  <div class="hot-car-wrapper">
    <div class="hot-car-header-box">热门车系 | 热门品牌 更多车系></div>
    <div class="hot-car-content-box">
      <van-tabs v-model:active="active">
        <template v-for="item in hotCarList" :key="item.id">
          <van-tab :title="item.name">
            <!-- {{ item.id }}
            {{ active }} -->

            <van-swipe indicator-color="white" :loop="false" :width="115">
              <div class="hot-car-info-box">
                <template v-for="item2 in item.hotCarItemList" :key="item2.id">
                  <van-swipe-item>
                    <div class="hot-car-item-box">
                      <div class="hot-car-item-img-box">
                        <van-image
                          :src="item2.img"
                          lazy-load
                          icon-size="24.26vw"
                          fit="fill"
                          width="24.26vw"
                          height="15.46vw"
                        >
                        </van-image>
                      </div>

                      <div class="hot-car-item-name">
                        {{ item2.name }}
                      </div>
                    </div>
                  </van-swipe-item>
                </template>
              </div>

              <!-- <van-swipe-item> </van-swipe-item> -->
            </van-swipe>
          </van-tab>
        </template>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  props: ["hotCarList"],
  setup() {
    const active = ref(0);
    return {
      active,
    };
  },
};
</script>

<style lang="scss">
.hot-car-wrapper {
  .hot-car-header-box {
  }
  .hot-car-content-box {
    /* position: relative; */
    .hot-car-info-box {
      display: flex;
      justify-content: center;
      align-items: center;
      /* overflow: hidden; */
      .hot-car-item-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-items: center;
        width: 138vw/375 * 100;
        height: 100vw/375 * 100;
        padding: 6vw/375 * 100 12vw/375 * 100 0;
        .hot-car-item-img-box {
          width: 91vw/375 * 100;
          height: 58vw/375 * 100;
        }
      }
    }
  }
}
</style>